<template>
  <div id="allmap">
    <!-- 地图 -->
    <div id="mapZZZ"></div>

    <!-- 图例 -->
    <!-- <div class="person_legend" v-if="showLegend">
      <h3>
        图例
        <i class="iconfont icon-shanchu" @click="showLegend = false"></i>
      </h3>
      <p>
        <span>
          <img :src="legend.ncdOverlay" alt />
        </span>
        <span style="font-size: 12px">垃圾点位</span>
      </p>
    </div> -->

    <!-- 右上按钮 -->
    <!-- <el-button
      style="position: absolute; right: 0px; top: 25px"
      size="mini"
      type="primary"
      @click="onlyShowHeader()"
      icon="el-icon-circle-close"
      >隐藏其它</el-button
    > -->
    <!-- <el-button
      style="position: absolute; right: 122px; top: 25px"
      size="mini"
      type="primary"
      @click="requestFullScreen()"
      v-if="!isFull"
      icon="el-icon-full-screen"
      >全屏</el-button
    > -->
    <!-- <el-button
      style="position: absolute; right: 122px; top: 25px"
      size="mini"
      type="primary"
      @click="exitFullscreen()"
      v-else
      icon="el-icon-full-screen"
      >退出全屏</el-button
    > -->

    <!-- 右上方显示隐藏图标操作栏,多选 -->
    <!-- <div class="map-operation">
      <ul>
        <li
          v-for="(item, index) in mapOperationsList"
          :class="{ 'active': item.active }"
          :key="index"
          @click="changeOperationValue(item, index)"
        >
          <i :class="item.icon"></i>
          {{ item.name }}
        </li>
      </ul>
    </div> -->

    <!-- 左下角 列表展开按钮-->
    <div class="mini_legend" v-if="hideFooter" @click="showFooter()">
      标段列表
    </div>

    <!-- 右下角 图例展开按钮-->
    <!-- <div
      class="mini_legend right"
      v-if="!showLegend"
      @click="showLegend = !showLegend"
    >
      图例
    </div> -->

    <!-- 线段、标段 的 编辑展示数组 -->
    <!-- <div class="edit-poly-list-wrap" v-if="isShowTableForPoly">
        <div class="edit-poly-list">
          <div>
            <el-table
              :data="arrayPolyDataForEdit"
              class="card-table"
              style="width: 100%"
              height="394"
              size="mini"
              :header-cell-style="{ height: '40px' }"
              border
              fit
              highlight-current-row
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column
                prop="lng"
                label="经度"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="lat"
                label="纬度"
                align="center"
              ></el-table-column>
              
            </el-table>
          </div>
        </div>
        <div
          style="
            position: absolute;
            bottom: 10px;
            left: 0px;
            right: 0px;
            text-align: center;
          "
        >
          <el-button
            style="width: 180px"
            type="primary"
            @click="tableForPolySave"
            >保 存</el-button
          >
          <el-button style="width: 180px" @click="tableForPolyCancle"
            >取 消</el-button
          >
        </div>
</div> -->
    <!-- 面板切换选项卡 -->
    <!-- <div class="info-tabs">
        <a
          v-for="(item, index) in mapInfoTabs"
          :class="{ active: mapInfoTabValue === index }"
          :key="index"
          @click="changeMapInfoTabValue(index)"
        >
          <i :class="item.icon"></i>
        </a>
      </div> -->
  </div>
</template>

<script>
import imgStationChuYu from '@/assets/img/marker/厨余垃圾中转站.png'
import imgStationKeHuiShou from '@/assets/img/marker/可回收垃圾中转站.png'
import imgStationQiTa from '@/assets/img/marker/其他垃圾中转站.png'
import imgStationYouHai from '@/assets/img/marker/有害垃圾中转站.png'
import imgMarkerChuYu from '@/assets/img/marker/厨余垃圾.png'
import imgMarkerKeHuiShou from '@/assets/img/marker/可回收垃圾.png'
import imgMarkerQiTa from '@/assets/img/marker/其他垃圾.png'
import imgMarkerYouHai from '@/assets/img/marker/有害垃圾.png'
import imgMarkerNCD from '@/assets/img/marker/垃圾点.png'
// import imgMarkerLarge from '@/assets/img/marker/markerImageLarge.png'
// import imgMarkerSmall from '@/assets/img/marker/markerImageSmall.png'
// import imgMarkerVillage from '@/assets/img/marker/markerImageVillage.png'
import imgMarkerCLC from '@/assets/img/marker/markerImageCLC.png'
import imgMarkerCY from '@/assets/img/marker/markerImageSmall.png'
import imgMarkerXQCY from '@/assets/img/marker/markerImageVillage.png'
import imgMarkerZZZ from '@/assets/img/marker/markerImageZZZ.png'
// import imageMarkerCarL from '@/assets/img/marker/carLarge.png'
// import imageMarkerCarS from '@/assets/img/marker/carSmall.png'
// import imageMarkerCarV from '@/assets/img/marker/carVillage.png'
import warningMark from '@/assets/img/warning-mark.png'
import closeBtnImg from '@/assets/img/define.png'
import eventBus from '@/eventBus.js'
import MapStr from '@/main.js'
import Schart from 'vue-schart';
import { newMap } from '@/common/js/map.js'
export default {
  components: {
    Schart
  },
  data () {
    return {
      Data: {
        arrayPointData: [],
        arrayStationData: [],
        arrayFactoryData: []
      },

      isFull: false,
      map: null,
      mapZoom: 16,
      // 班组区域
      // legend: {
      //   StationChuYu: imgStationChuYu,
      //   StationKeHuiShou: imgStationKeHuiShou,
      //   StationQiTa: imgStationQiTa,
      //   StationYouHai: imgStationYouHai,
      //   MarkerChuYu: imgMarkerChuYu,
      //   MarkerKeHuiShou: imgMarkerKeHuiShou,
      //   MarkerQiTa: imgMarkerQiTa,
      //   MarkerYouHai: imgMarkerYouHai,
      //   ncdOverlay: imgMarkerNCD,
      // },
      MapOverlay: {
        arrayCLCMapOverlay: [],
        arrayZZZMapOverlay: [],
        arrayLJDMapOverlay: [],
      },
      // MapV: {
      //   iconLayerDic: {},
      //   textLayerDic: {},
      //   dataSetDic: {},
      //   VIcon_Installations: {},
      //   VText_Installations: {}
      // },
      // warningNum: 0,
      // 筛选数据
      hideFooter: false,
      showLegend: true,
      // mapInfoTabs: [{
      //   icon: 'el-icon-truck'
      // }, {
      //   icon: 'el-icon-collection-tag'
      // }],
      mapInfoTabValue: 0,
      showMapInfo: true,
      mapOperationsList: [{
        name: '垃圾点',
        icon: 'el-icon-chicken',
        num: 0,
        active: true
      }],
      //新增标段
      isShowTableForPoly: false,
      mapDrawingPolygon: null,
      arrayPolyDataForEdit: [],
      arrayPolygon: [],
    }
  },
  destroyed () {
    // eventBus.$off('mapData_Point')
    eventBus.$off('mapDBrowArea')
    eventBus.$off('realtimeOnlineStatistics_Rubbish')
  },
  created () {
    // 新增标段
    eventBus.$on('addArea', val => {
      this.addArea()
    })
    // 自动刷新 + 显示人员标记点
    eventBus.$on('mapData_Area', val => {
      this.Data.arrayForType_Rubbish = val
      this.drawMapV()
    })
    // 垃圾点
    // eventBus.$on('mapData_Point', val => {
    //   this.Data.arrayPointData = val
    //   this.mapOperationsList[0].num = val.length
    //   this.handleCheckPoint()
    // })
    eventBus.$on('mapDBrowArea', val => {
      this.dbClickArea(val)
    })
    // 隐藏底部列表
    eventBus.$on('toHideFooter', () => {
      this.hideFooter = true;
    })
    // 隐藏左侧面板
    // eventBus.$on('toHideMapInfo', () => {
    //   this.showMapInfo = false;
    //   this.mapInfoTabValue = '';
    // })
  },
  mounted () {
    // 显示地图
    this.mapShow()
  },
  methods: {
    // 显示地图
    async mapShow () {
      // 百度地图API功能
      this.map = newMap();
      // 初始化地图,设置中心点坐标和地图级别
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('LNG'), localStorage.getItem('LAT')), this.mapZoom)

      const _this = this
      // 点击屏幕
      this.map.addEventListener('click', function (e) {
        console.log(e.point.lng);
      });
    },
    // 新建标段
    addArea () {
      // if (this.mapDrawingPolyLine) {
      //   // 结束画图
      //   this.closePolyLineManager()
      // }
      // 显示经纬度表
      // this.isShowTableForPoly = true
      // 电子围栏 初始化
      if (!this.mapDrawingPolygon) {
        // 实例化绘图工具
        this.mapDrawingPolygon = new BMapLib.DrawingManager(this.map, {
          // enableDrawingTool: true,//工具栏
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 5)
          }
        })

        // 设置绘制模式为绘制多边形
        this.mapDrawingPolygon.setDrawingMode('polygon')

        const _this = this
        // 监听绘制结果
        this.mapDrawingPolygon.addEventListener('polygoncomplete', function (e, overlay) {
          // this.mapDrawingPolygon.addEventListener('overlaycomplete', res => {
          overlay.getPath()
          overlay.addEventListener('click', function (e) {
            // this.ID = null;
            _this.editPolygon(this)
          })
          _this.arrayPolyDataForEdit = overlay.getPath()
        })
      }
      if (this.mapDrawingPolygon.isOpen) {
        // 结束画图
        this.mapDrawingPolygon.close()
      } else {
        // 开始画图
        this.mapDrawingPolygon.open()
      }
    },
    // 编辑标段
    editPolygon (overlay) {
      const _this = this

      // 显示经纬度表
      // this.isShowTableForPoly = true

      overlay.enableEditing() // 设置电子围栏可编辑
      // 覆盖物添加监听事件，监听覆盖物编辑情况
      overlay.addEventListener('lineupdate', function (r) {
        _this.arrayPolyDataForEdit = this.getPath()
      })

      var m = new BMap.Icon(closeBtnImg, new BMap.Size(40, 40))
      var closeBtn = new BMap.Marker(overlay.getBounds().getNorthEast(), { icon: m, offset: new BMap.Size(0, -15) })
      this.map.addOverlay(closeBtn)

      closeBtn.addEventListener('click', function (r) {
        overlay.disableEditing()
        console.log(overlay.getPath())
        _this.arrayPolyDataForEdit = overlay.getPath()
        // 当多边形完成编辑时触发，计算点位与多边形重合范围
        // _this.isPointInPolygon(overlay);
        _this.map.removeOverlay(this)
      })
    },
    drawMapV () {
      // console.log('数据-----')
      // console.log(data)
      var data = [
        {
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  106.517699,
                  29.550606
                ],
                [
                  106.517766,
                  29.550449
                ],
                [
                  106.517501,
                  29.550351
                ],
                [
                  106.517631,
                  29.550154
                ],
                [
                  106.516657,
                  29.549758
                ],
                [
                  106.517021,
                  29.549121
                ],
                [
                  106.517061,
                  29.549066
                ],
                [
                  106.517254,
                  29.549157
                ],
                [
                  106.517443,
                  29.549212
                ],
                [
                  106.517618,
                  29.549228
                ],
                [
                  106.517946,
                  29.549239
                ],
                [
                  106.518022,
                  29.549267
                ],
                [
                  106.518269,
                  29.549231
                ],
                [
                  106.518426,
                  29.549247
                ],
                [
                  106.518808,
                  29.549341
                ],
                [
                  106.518395,
                  29.550421
                ],
                [
                  106.518229,
                  29.550732
                ]
              ]
            ]

          }
        },
        {
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  116.364767,
                  39.883374
                ],
                [
                  116.366047,
                  39.883402
                ],
                [
                  116.36681,
                  39.883378
                ],
                [
                  116.3673,
                  39.883395
                ],
                [
                  116.367295,
                  39.882551
                ],
                [
                  116.366393,
                  39.882523
                ],
                [
                  116.366011,
                  39.882516
                ],
                [
                  116.364847,
                  39.882468
                ],
                [
                  116.364416,
                  39.882474
                ],
                [
                  116.364129,
                  39.882436
                ],
                [
                  116.364205,
                  39.882665
                ],
                [
                  116.364776,
                  39.882689
                ]
              ]
            ]
          }
        },
        {
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  121.392175,
                  31.258612
                ],
                [
                  121.394304,
                  31.25808
                ],
                [
                  121.394834,
                  31.257949
                ],
                [
                  121.393999,
                  31.256081
                ],
                [
                  121.393864,
                  31.255989
                ],
                [
                  121.393657,
                  31.255919
                ],
                [
                  121.393442,
                  31.255919
                ],
                [
                  121.391367,
                  31.256359
                ]
              ]
            ]
          }
        },
        {
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  121.444459,
                  31.243393
                ],
                [
                  121.44507,
                  31.243069
                ],
                [
                  121.4456,
                  31.242243
                ],
                [
                  121.447334,
                  31.242776
                ],
                [
                  121.446382,
                  31.244258
                ],
                [
                  121.445618,
                  31.243941
                ],
                [
                  121.445007,
                  31.24364
                ]
              ]
            ]
          }
        },
        {
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  116.45049,
                  39.934408
                ],
                [
                  116.4519,
                  39.934335
                ],
                [
                  116.451878,
                  39.933958
                ],
                [
                  116.4519,
                  39.933689
                ],
                [
                  116.451959,
                  39.933592
                ],
                [
                  116.452219,
                  39.933298
                ],
                [
                  116.452686,
                  39.932983
                ],
                [
                  116.452691,
                  39.932734
                ],
                [
                  116.450485,
                  39.932752
                ]
              ]
            ]
          }
        }
      ]
      var dataSet = new mapv.DataSet(data);

      var options = {
        fillStyle: 'rgba(255, 80, 53, 0.8)',
        strokeStyle: 'rgba(250, 255, 53, 0.8)',
        size: 3,
        lineWidth: 1,
        draw: 'simple'
      }

      var mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);

      this.map.centerAndZoom(new BMap.Point(106.517699, 29.550606), 14);
    },
    dbClickArea (val) {
      // 选中标段地图居中

    },
    // 地图信息tab切换
    // changeMapInfoTabValue (index) {
    //   if ((index === this.mapInfoTabValue) && this.showMapInfo) {
    //     this.showMapInfo = false;
    //     this.mapInfoTabValue = '';
    //   } else {
    //     this.showMapInfo = true;
    //     this.mapInfoTabValue = index;
    //   }
    // },
    // 改变右上方显示隐藏图标
    changeOperationValue (item, index) {

      item.active = !item.active

      switch (index) {
        case 0:
          this.handleCheckPoint()
          break;
        default:
          break;
      }
    },
    // 显示底部列表
    showFooter () {
      this.hideFooter = false;
      eventBus.$emit('toShowFooter');
    },
    // 仅显示头
    onlyShowHeader () {
      // this.toHideWarningInfo();
      // eventBus.$emit('toHideMapInfo');
      eventBus.$emit('toHideFooter');
      eventBus.$emit('toHideLegend');
    },
    // 进入全屏
    requestFullScreen () {
      this.isFull = true;
      eventBus.$emit('contentToFullScreen');
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    // 退出全屏
    exitFullscreen () {
      this.isFull = false;
      eventBus.$emit('contentToDefaultScreen');
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    }
  }
}
</script>

<style scoped lang="less">
#allmap {
  position: relative;
  // height: calc(100% - 40px);
  height: 100%;
}
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
#map {
  height: 100%;
}
.person_top {
  width: 150px;
  height: 130px;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #b2dfee;
  border: 1px solid #ccc;
  p {
    height: 30px;
    // text-align: center;
    padding-left: 5px;
    padding-left: 10px;
    color: #333;
    span:first-child {
      text-align: center;
      padding-top: 14px;
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        // background-size: 30px 30px;
        height: 30px;
      }
    }
  }
}
.person_legend {
  width: 140px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.status_legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0 10px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  .public {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    margin-right: 2px;
  }
  .online {
    background-color: #1afa29;
  }
  .outline {
    background-color: blue;
  }
  .warning {
    background-color: red;
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #007acc;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.map-infos-wrap {
  position: absolute;
  left: 10px;
  top: 30px;
  // height: calc(100% - 80px);
  height: 430px;
  .map-infos {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 300px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    h3 {
      font-size: 15px;
      line-height: 26px;
      margin-left: 10px;
      i {
        float: right;
        font-style: normal;
        color: #666;
        font-size: 12px;
      }
    }
    .item-wrap {
      display: flex;
      margin-bottom: 20px;
      .item-con {
        flex: 1;
        text-align: center;
        h2 {
          margin-top: 10px;
          line-height: 30px;
          font-size: 20px;
        }
        span {
          font-size: 13px;
          color: #666;
        }
      }
    }
    .icon-wrap {
      margin: 10px 10px 10px 0;
      .icon-con {
        width: 33.33%;
        float: left;
        text-align: center;
        margin: 15px 0;
        position: relative;
        i {
          font-size: 20px;
          display: block;
          margin-bottom: 5px;
          color: #333;
        }
        .el-tag.el-tag--mini {
          position: absolute;
          right: 0;
          top: -8px;
          height: 15px;
          line-height: 15px;
          border-color: #e1dada;
          background: #e1dada;
          color: #666;
        }
        span {
          font-family: STHeiti;
          font-size: 14px;
          color: rgb(34, 34, 34);
        }
        &.hasColor {
          i {
            color: #007acc;
          }
          .el-tag.el-tag--mini {
            font-size: 14px;
            border-color: #007acc;
            background: #007acc;
            color: #fff;
          }
        }
      }
    }
    .map-checkboxs {
      margin-top: 10px;
      p {
        line-height: 30px;
      }
    }
    /deep/.el-progress-bar__outer {
      background: #d8d8d8;
    }
  }
  .info-tabs {
    position: absolute;
    right: -30px;
    top: 20px;
    background: rgba(255, 255, 255, 0.9);
    width: 30px;
    border-radius: 0 3px 3px 0;
    overflow: hidden;
    a {
      display: block;
      padding: 3px 3px 1px 3px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      &.active {
        background: #007acc;
        i {
          color: #fff;
        }
      }
    }
  }
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 6px;
  }
}
/deep/.el-table.card-table {
  margin-top: 10px;
  background: none;
  thead,
  tbody {
    color: #333;
  }
  tr,
  th {
    background: none !important;
  }
  th div,
  td div {
    font-size: 14px;
  }
  tr:nth-child(2n) {
    background: none;
  }
  tr:hover > td {
    background: none !important;
  }
}
.map-operation {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 32px;
  top: 10px;
  border-radius: 5px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #ecf0f3;
      background: #b2bbbe;
      font-size: 16px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      border-radius: 2px;
      i {
        margin-right: 3px;
        margin-bottom: 3px;
        font-size: 14px;
        &:before {
          font-size: inherit;
          color: inherit;
        }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
      &.active {
        color: #fff;
        background: #007acc;
        border-radius: 2px;
      }
    }
  }
}
.edit-poly-list-wrap {
  position: absolute;
  left: 20px;
  top: 50px;
  height: 510px;
  .edit-poly-list {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 400px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
</style>
